<template>
  <div>
    <a-modal v-model:visible="visible" @ok="handleOk" @cancel="closeModel" title="选择表格表头" :width="850" destroyOnClose>
      <div class="custom-box-flex">
        <div class="custom-box">
          <div class="custom-head">
            <span>可选字段</span>
            <a-checkbox v-model:checked="allChecked" :indeterminate="indeterminate"  @change="onChangeAll">全选</a-checkbox>
          </div>
          <div class="custom-body">
            <a-checkbox-group v-model:value="checked" style="width: 100%">
              <a-row>
                <a-col class="custom-checkobox" :span="6" v-for="item in plainOptions.data" :key="item.key">
                  <a-checkbox :value="item.key" :disabled="item.key === 'contractNumber' || item.key === 'contractName'">{{item.name}}</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </div>
        </div>
        <div class="custom-box-right">
          <div class="custom-head-right">
            <span>已选字段</span>
          </div>
          <div class="custom-right-scroll">
            <draggable filter=".unmover"  :list=" plainOptions.listdata" :force-fallback="true"  item-key="value" chosen-class="chosen" animation="300" @end="onEnd">
              <template #item="{ element, index }">
                <div :key="element.key" :class="{item: true, unmover: element.key === 'contractNumber' || element.key === 'contractName'}">
                  <div class="item-txt">
                    <HolderOutlined/>
                    {{ element.name }}
                  </div>
                  <CloseOutlined
                      v-if="element.key !== 'contractNumber' && element.key !== 'contractName'"
                      @click="deleteList(element,index)"
                      :style="{lineHeight: '30px', cursor: 'pointer'}"/>
                </div>
              </template>
            </draggable>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="form-btn-bottom">
          <div>
            <a-button type="link" @click="resetSetCheck">恢复默认设置</a-button>
          </div>
          <div>
            <a-button key="back" class="border-btn" @click="closeModel">取消</a-button>
            <a-button key="submit" @click="handleOk" class="search-btn1">保存</a-button>
          </div>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script setup>
import {ref, reactive, defineProps, getCurrentInstance, defineEmits, watch} from "vue";
const { proxy  } = getCurrentInstance()
import draggable from 'vuedraggable'
import { HolderOutlined, CloseOutlined} from '@ant-design/icons-vue';
const emit = defineEmits(['saveColumn'])
const allChecked = ref(true)
const indeterminate = ref(true)
const props = defineProps({
  customData: {
    type: Array,
    required: true,
    // eslint-disable-next-line vue/require-valid-default-prop
    default: []
  },
  columSaveData: {
    type: Array,
    default: () => []
  },
  module: {
    type: String,
    default: () => ''
  }
})
const visible = ref(false);
const plainOptions = reactive({
  data:  props.customData,
  listdata:[]
})


const checked = ref([])
const onEnd = () => {
  console.log('拖拽的顺序',  plainOptions.listdata);
}
const deleteList =  ((item, index)=> {
  console.log('删除了', item)
  plainOptions.listdata.splice(index, 1)
  checked.value.splice(checked.value.indexOf(item.key), 1)
  console.log('删除了66', checked.value)
})
const showModal = () => {
  visible.value = true;
  plainOptions.data = props.customData
  plainOptions.listdata = []
  let newCheckData = props.columSaveData.concat(checked.value).concat(plainOptions.data)
  console.log('newCheckData', newCheckData)
  checked.value = [...new Set(newCheckData)]
  const newArr = []
  plainOptions.data.map(optionItem => {
    checked.value.map(item => {
      if (item === optionItem.key)
        newArr.push(optionItem)
    })
  })
  plainOptions.listdata = newArr
  allDreageChange()
  console.log('传过来的数据', props.columSaveData)
  console.log('props.columSaveData', checked.value)
  console.log('plainOptions.listdata', plainOptions.listdata)
  console.log('传过来的数据3',  plainOptions.data)
};
// 保存自定义列
const handleOk = e => {
  let newList = []
  plainOptions.listdata.map((item, index) => {
    let newObj = {
      columnKey: '',
      orderNum: ''
    }
    Object.assign(newObj, {
      columnKey: item.key,
      orderNum: index + 1
    })
    newList.push(newObj)
  })
  let culumObj = {
    module: props.module,
    columns: newList
  }
  proxy.$api.postTableColumn(culumObj).then(res => {
    console.log(e, res);
    emit('saveColumn', props.module)
    visible.value = false;
    checked.value = []
  })
};
const resetSetCheck = () => {
  plainOptions.listdata = []
  checked.value = []
}
const closeModel = () => {
  visible.value = false;
  checked.value = []
}
const onChangeAll = (e) => {
  console.log('全选了', e)
  let allData = []
  plainOptions.data.map(item => {
    allData.push(item.key)
  })
  checked.value = e.target.checked? allData: ['contractNumber', 'contractName']
  indeterminate.value = false
}
const allDreageChange = () => {
  const newArr = []
  checked.value.map(item => {
    plainOptions.data.map(optionItem => {
      if (item === optionItem.key)
        newArr.push(optionItem)
    })
  })
  plainOptions.listdata = newArr
}
watch( () => checked.value, (newVal) => {
      let newArrCheck = checked.value
      newArrCheck.map((item, index) => {
        if (item.key) {
          newArrCheck.splice(index, 1)
        }
      })
      console.log('newArrCheck', newArrCheck)
      console.log('checked.value', checked.value.length, plainOptions.data.length)
      indeterminate.value = !!newVal.length && newVal.length < plainOptions.data.length
      allChecked.value = checked.value.length === plainOptions.data.length
      allDreageChange()
    },
    {
      deep: true
    }
)
// eslint-disable-next-line no-undef
defineExpose({
  showModal
})
</script>

<style lang="scss" scoped>
.custom-box-flex {
  display: flex;
  .custom-box-right {
    width: 210px;
    height: 303px;
    background: #ffffff;
    border: 1px solid #dcdee0;
    .custom-head-right {
      width: 210px;
      height: 40px;
      background: #ebecf0;
      color: #2C3749;
      line-height: 40px;
      span {
        padding-left: 20px;
      }
    }
    .custom-right-scroll {
      height: 260px;
      overflow-x: hidden;
      overflow-y: scroll;
    }
  }
  .custom-box {
    width: 580px;
    height: 303px;
    background: #ffffff;
    border: 1px solid #dcdee0;
    margin-right: 10px;
    overflow: hidden;
    .custom-head {
      width: 580px;
      height: 40px;
      background: #ebecf0;
      color: #2C3749;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      span {
        padding-left: 20px;
      }
    }
    .custom-body {
      padding: 20px;
      overflow-y: scroll;
      height: 300px;
      .custom-checkobox {
        margin-bottom: 24px;
      }
    }
  }
}

.form-btn-bottom {
  display: flex;
  justify-content: space-between;
  height: 62px;
  line-height: 62px;
  background: #ffffff;
  box-shadow: 0px -4px 9px 0px rgba(0,0,0,0.09);
}

.chosen {
  background: #d5d3d7;
}
.item {
  width: 210px;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #DCDEE0;
  padding-left: 20px;
  color:  rgba(0,0,0,0.25);
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  .item-txt {
    width: 190px;
    color: #2C3749;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
  }
}
</style>
